import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { UserOutlined, AppstoreOutlined, DatabaseOutlined, ContainerOutlined } from '@ant-design/icons';
import { Column } from '@ant-design/plots';
import './styles.css';

const DataDashboard: React.FC = () => {
  // 模拟数据
  const todayData = {
    identities: 156,
    products: 89,
    assets: 234,
    contracts: 67
  };

  const totalData = {
    identities: 3456,
    products: 1289,
    assets: 2934,
    contracts: 867
  };

  // 模拟趋势数据
  const trendData = [
    { type: '数字身份', value: 156, category: '今日' },
    { type: '数据产品', value: 89, category: '今日' },
    { type: '数据资产', value: 234, category: '今日' },
    { type: '交易合同', value: 67, category: '今日' },
    { type: '数字身份', value: 3456, category: '总计' },
    { type: '数据产品', value: 1289, category: '总计' },
    { type: '数据资产', value: 2934, category: '总计' },
    { type: '交易合同', value: 867, category: '总计' },
  ];

  const config = {
    data: trendData,
    isGroup: true,
    xField: 'type',
    yField: 'value',
    seriesField: 'category',
    columnStyle: {
      radius: [4, 4, 0, 0],
    },
  };

  return (
    <div>
      <h2>数据大盘</h2>
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Card>
            <Statistic
              title="数字身份"
              value={todayData.identities}
              prefix={<UserOutlined />}
              suffix="今日新增"
            />
            <Statistic
              value={totalData.identities}
              suffix="总计"
              className="total-statistic"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="数据产品"
              value={todayData.products}
              prefix={<AppstoreOutlined />}
              suffix="今日新增"
            />
            <Statistic
              value={totalData.products}
              suffix="总计"
              className="total-statistic"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="数据资产"
              value={todayData.assets}
              prefix={<DatabaseOutlined />}
              suffix="今日新增"
            />
            <Statistic
              value={totalData.assets}
              suffix="总计"
              className="total-statistic"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="交易合同"
              value={todayData.contracts}
              prefix={<ContainerOutlined />}
              suffix="今日新增"
            />
            <Statistic
              value={totalData.contracts}
              suffix="总计"
              className="total-statistic"
            />
          </Card>
        </Col>
      </Row>
      <Card className="trend-chart">
        <h3>数据趋势对比</h3>
        <Column {...config} />
      </Card>
    </div>
  );
};

export default DataDashboard; 